<style lang="scss" scoped>
    @import '~@/scss/public.scss';
    .ui-main{
        height: 100%;
    }
    .ui-main-content{
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #f5f5f5;
    }
    .ui-main-header,.ui-main-footer{
        position: relative;
    }
    .ui-main-body-scroll{//body的滚动条
        flex:1;
        justify-content: center;
        overflow-y: auto;
    }

    .ui-main-body{//让主要内容居中
        background-color: #fff;
        width: 1250px;
        margin: 0 auto;
        min-height: 100%;
    }

</style>
<template>
    <div class="ui-main">
        <!-- header 不受隐藏 -->
        <div class="ui-main-header">
            <slot class="ui-main-header" name="header"></slot>
        </div>

        <!-- 主要部分当子路由激活时隐藏 -->
        <div class="ui-main-content">
            <div class="ui-main-body-scroll">
                <div ref="main-body" class="ui-main-body">
                    <slot></slot>
                </div>
                <ui-footer></ui-footer>
            </div>
            <div class="ui-main-footer">
                <slot name="footer"></slot>
            </div>
        </div>

        <ui-router class="ui-main-router"></ui-router>
    </div>
</template>
<script>
    export default {
        name:'ui-main',
        data(){
            return {
                actived:false,
                destroyed:false 
            }
        },
        methods:{
            hideParentContent(){
                if(this.parentUiMainContent){
                    this.parentUiMainContent.style.display = 'none'
                }
            },
            ShowParentContent(){
                if(this.parentUiMainContent){
                    this.parentUiMainContent.style.display = ''
                }
            },
        },
        mounted(){
           this.$nextTick(() => {
               //获取父级ui-main 如果有的话
               let parentUiMain = this.$el.parentElement
               if (parentUiMain && parentUiMain.className && parentUiMain.className.indexOf('ui-main')>-1) {
                   this.parentUiMainContent = parentUiMain.querySelector('.ui-main-content')
               }

               // 子路由激活后,隐藏父级ui-main content
               this.hideParentContent()

               
           })
        },
        beforeDestroy () {
            // 当前页销毁,显示父级ui-main content
            this.ShowParentContent()
        },
    }
</script>